<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>浏览器拍照示例</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>  
<button id="take-photo">拍照</button>  
<canvas id="canvas" width="640" height="480"></canvas>
<script>
	// 获取视频流并显示在video元素上  
	navigator.mediaDevices.getUserMedia({ video: true })  
	    .then(function(stream) {  
	        var video = document.getElementById('video');  
	        video.srcObject = stream;  
	        video.play();  
	    })  
	    .catch(function(err) {  
	        console.log("An error occurred: " + err);  
	    });  
	  
	// 为拍照按钮添加点击事件监听器  
	document.getElementById('take-photo').addEventListener('click', function() {  
	    // 获取视频元素和canvas元素  
	    var video = document.getElementById('video');  
	    var canvas = document.getElementById('canvas');  
	    var context = canvas.getContext('2d');  
	      
	    // 将当前视频帧绘制到canvas元素上  
	    context.drawImage(video, 0, 0, canvas.width, canvas.height);  
	});
	
</script>
</body>
</html>